<script lang="ts" setup>
import { getCurrentInstance, reactive, ref } from 'vue'
import { onPageScroll, onReady } from '@dcloudio/uni-app'
import TnBadge from '@tuniao/tnui-vue3-uniapp/components/badge/src/badge.vue'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import PageContainer from '@/components/page-container/index.vue'
import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
import { useScrollTransparentNavbar } from '@/hooks'
import system from '@/api/system.js'
import user from '@/api/user.js'
import { FILE_URL } from '@/api/config.js'

const paging = ref(null)
useZPaging(paging)
// 导航栏的高度
const navbarHeight = ref(0)
const instance = getCurrentInstance()
const state = reactive({
  chatLists: [],
  messagesUnreadTotal: {
    systemTotal: 0,
    followTotal: 0,
    replyTotal: 0,
    likeTotal: 0,
  },
})

const jumpLikePage = () => {
  tnNavPage('/messagesPages/likelist')
  readMessage(0, 'like')
}

const jumpFollowPage = () => {
  tnNavPage('/minePages/fans')
  readMessage(0, 'follow')
}

const jumpReplyPage = () => {
  tnNavPage('/messagesPages/replylist')
  readMessage(0, 'reply')
}

const jumpSystemPage = () => {
  tnNavPage('/messagesPages/systemlist')
  readMessage(0, 'system')
}

const { init: initTransparentScroll, opacityScrollHandle } =
  useScrollTransparentNavbar(instance)

// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}

const getMessagesUnreadTotal = () => {
  system
    .messagesUnreadTotal()
    .then((res) => {
      state.messagesUnreadTotal = res.data
    })
    .catch((err: any) => {
      console.log(err, 'getMessageList')
    })
}
const queryList = (pageNo: any, pageSize: any) => {
  getMessagesUnreadTotal()

  user
    .chatLists({
      page: pageNo,
      page_size: pageSize,
    })
    .then((res) => {
      paging.value.complete(res.data)
    })
    .catch((err: any) => {
      console.log(err, 'getChatLists')
      paging.value.complete(false)
    })
}

const clickMessage = (
  messageId: number,
  messageType: string,
  jumpUrl: string
) => {
  tnNavPage(jumpUrl)
  readMessage(messageId, messageType)
}
const readMessage = (messageId: number, messageType: string) => {
  system
    .readMessages({
      id: messageId,
      type: messageType,
    })
    .then((res) => {})
    .catch((err: any) => {
      console.log(err, 'readMessages')
    })
}
const navUserChats = (
  otherUserId: number,
  nickname: string,
  chatsId: number
) => {
  tnNavPage(
    `/minePages/chats?receiveUserId=${otherUserId}&receiveUserNickname=${nickname}&chatsId=${chatsId}`
  )
}
onReady(() => {
  initTransparentScroll()
})

onPageScroll((e) => {
  opacityScrollHandle(e.scrollTop)
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      back-icon=""
      back-text=""
      home-icon=""
      bg-color="rgba(255, 255, 255, 0)"
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    >
      <view class="navbar">
        <view class="message"> 消 息 </view>
      </view>
    </TnNavbar>
    <view class="message-container">
      <!-- 方式1 start-->
      <view
        class="tn-flex message-fixed"
        :style="{ paddingTop: `${navbarHeight + 10}px` }"
      >
        <view class="category-info tn-flex-center">
          <view class="item" @click="jumpLikePage">
            <view class="icon tn-bg-image tn-gradient-bg__red-light">
              <TnIcon name="like-lack-fill" color="#ff444f" />
              <TnBadge
                v-if="state.messagesUnreadTotal.likeTotal > 0"
                :value="state.messagesUnreadTotal.likeTotal"
                :max="99"
                type="danger"
              />
            </view>
            <view class="text">赞/喜欢</view>
          </view>
          <view class="item" @click="jumpFollowPage">
            <view class="icon tn-bg-image tn-gradient-bg__blue-light">
              <TnIcon name="my-fill" color="#3646ff" />
              <TnBadge
                v-if="state.messagesUnreadTotal.followTotal > 0"
                :value="state.messagesUnreadTotal.followTotal"
                :max="99"
                type="danger"
              />
            </view>
            <view class="text">关注</view>
          </view>
          <view class="item" @click="jumpReplyPage">
            <view class="icon tn-bg-image tn-gradient-bg__teal-light">
              <TnIcon name="reply-fill" color="#27b93a" />
              <TnBadge
                v-if="state.messagesUnreadTotal.replyTotal > 0"
                :value="state.messagesUnreadTotal.replyTotal"
                :max="99"
                type="danger"
              />
            </view>
            <view class="text">评论</view>
          </view>
          <view class="item" @click="jumpSystemPage">
            <view class="icon tn-bg-image tn-gradient-bg__indigo-light">
              <TnIcon name="notice-fill" color="#01beff" />
              <TnBadge
                v-if="state.messagesUnreadTotal.systemTotal > 0"
                :value="state.messagesUnreadTotal.systemTotal"
                :max="99"
                type="danger"
              />
            </view>
            <view class="text">系统消息</view>
          </view>
        </view>
      </view>

      <view class="tn-mt-sm">
        <z-paging
          ref="paging"
          v-model="state.chatLists"
          :paging-style="{ paddingTop: `${navbarHeight + 125}px` }"
          :safe-area-inset-bottom="true"
          :use-safe-area-placeholder="true"
          @query="queryList"
        >
          <template #refresher="{ refresherStatus }">
            <CustomRefresher :status="refresherStatus" />
          </template>
          <view class="">
            <view
              v-if="state.messagesUnreadTotal.systemTotal > 0"
              class="message-bg tn-flex tn-flex-col-center"
            >
              <view class="">
                <view
                  class="item-icon tn-bg-image tn-shadow-blur"
                  style="background-color: #3c7efe"
                >
                  <view class="icon">
                    <TnIcon name="notice-fill" />
                  </view>
                </view>
              </view>
              <view class="tn-pl-sm" style="width: 62vw">
                <view class="tn-flex justify-between tn-text-ellipsis-1">
                  <view class="justify-content-item">
                    <text class="tn-text-lg"> 系统通知 </text>
                  </view>
                </view>
                <view class="tn-pt-xs tn-text-ellipsis tn-text-ellipsis-1">
                  <text class="tn-color-gray tn-text-sm"> 您有新的系统消息 </text>
                </view>
              </view>
              <view class="" style="width: 20vw">
                <view class="tn-flex justify-end items-center">
                  <TnBadge
                    dot
                    type="danger"
                    :custom-style="{ margin: '40rpx 10rpx 0' }"
                  >
                    <text />
                  </TnBadge>
                </view>
              </view>
            </view>
            <view
              v-for="(item, index) in state.chatLists"
              :key="index"
              class="message-bg tn-flex tn-flex-col-center"
              @click="navUserChats(item.chatUser.id, item.chatUser.nickname, item.id)"
            >
              <view class="">
                <view class="logo-pic">
                  <view class="logo-image">
                    <view
                      class=""
                      :style="
                        'background-image:url(' +
                        FILE_URL +
                        item.chatUser.avatar +
                        ');width: 90rpx;height: 90rpx;background-size: cover;'
                      "
                    />
                  </view>
                </view>
              </view>
              <view class="tn-pl-sm" style="width: 62vw">
                <view class="tn-flex justify-between tn-text-ellipsis-1">
                  <view class="justify-content-item">
                    <text class="tn-text-lg">{{ item.chatUser.nickname }}</text>
                  </view>
                </view>
                <view class="tn-pt-xs tn-text-ellipsis tn-text-ellipsis-1">
                  <text class="tn-color-gray tn-text-sm"> {{ item.last_send_time }} </text>
                </view>
              </view>
              <view class="" style="width: 20vw">
                <view class="tn-flex justify-end tn-mb-xs tn-mt-xs">
                  <text class="tn-color-gray tn-text-sm">{{ item.msg_time }}</text>
                </view>
                <view
                  v-if="item.chatUser.msg_unread_total > 0"
                  class="tn-flex justify-end"
                >
                  <TnBadge
                    dot
                    type="danger"
                    :custom-style="{ margin: '10rpx 10rpx 0' }"
                  >
                    <text />
                  </TnBadge>
                </view>
              </view>
            </view>
          </view>
        </z-paging>
      </view>
      <view class="tn-tabbar-height" />
    </view>
  </PageContainer>
</template>

<style lang="scss" scoped>
@use '@/static/css/message.scss';
</style>
